<template>
    <div class="mall-layout-main">
        <div class="ant-spin-nested-loading">
            <div class="ant-spin-container">
                <div class="discount-wrapper">
                    <div class="discount-wrapper-center">
                        <div class="discount-header">
                            <div class="ant-image discount-logo">
                                <img class="ant-image-img" src="https://static.xyb2b.com/images/f32460a36a260cb8940ec7c5908151e5.png
                                " alt="">
                            </div>
                            <div class="discount-count-down">
                                <span>距离结束仅剩</span>
                                <span class="time">07</span>
                                <span>:</span>
                                <span class="time">07</span>
                                <span>:</span>
                                <span class="time">07</span>
                            </div>
                        </div>
                        <div class="infinite-scroll-component__outerdiv">
                            <div class="infinite-scroll-component">
                                <div class="discount-goods" v-infinite-scroll="load" style="overflow:auto" infinite-scroll-disabled="disabled">
                                    <div class="discount-goods-item track-discount-0" v-for="item in count">
                                        <img class="img-pic" src="../../assets/img/index/good.jpg" alt="">
                                        <div class="discount-goods-item-right">
                                            <div>
                                                <a href="" class="goods-title">加拿大Webber Naturals伟博天然 深海鱼油900mg 200粒</a>
                                                <div class="goods-jindu">
                                                   <el-progress :percentage="50" :format="format"></el-progress>
                                                </div>
                                                <div class="goods-tag">
                                                   <div class="goods-tag-item">限时特价</div>
                                                </div>
                                           </div>
                                           <div class="goods-price">
                                               <div class="goods-price-tax">
                                                   <div class="tax-price">
                                                       抢好价
                                                       <span class="price">￥ 105</span>
                                                   </div>
                                                   <div class="org-price">￥ 130</div>
                                               </div>
                                               <div class="goods-btn">
                                                   <span>抢购</span>
                                               </div>
                                           </div>
                                        </div>
                                    </div>
                                </div>
                                <p v-if="loading" class="more">
                                    <el-button size="small">加载更多</el-button>
                                </p>
                                <!-- <p v-if="loading">
                                    <div v-if="loadshow" class="loadingBox">
                                        <el-row v-loading="loading"
                                            element-loading-text="加载更多">
                                        <el-col></el-col>
                                        </el-row>
                                    </div>
                                </p> -->
                                <p v-if="noMore" class="more">没有更多了</p>
                                <!-- <div v-show="loadshow" class="loadingBox">
                                    <el-row v-loading="loading"
                                        element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" >
                                      <el-col></el-col>
                                    </el-row>
                                </div> -->
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <homefooter></homefooter>
    </div>
</template>

<script>
    import homefooter from '../assembly/footer'
    export default {
        components: {
            homefooter
        },
        data() {
            return {
                loading: false,
                loadshow: true,
                page: 1,
                count: 10
            }
        },
        computed: {
            noMore() {
                return this.count >= 20
            },
            disabled() {
                return this.loading || this.noMore
            }
        },
        methods: {
            format(percentage) {
                return percentage === 100 ? '满' : `已售${percentage}%`;
            },
            load() {
                console.log(1);
                this.loading = true
                    // setTimeout(() => {
                    //     this.count += 2
                    //     this.loading = false
                    // }, 2000)
            }

        }
    }
</script>

<style lang="scss" scoped>
    .mall-layout-main {
        padding-top: 0;
        min-height: calc(100vh - 200px);
        margin: 0 auto;
        background-color: #fff !important;
    }
    
    .ant-spin-nested-loading {
        position: relative;
    }
    
    .ant-spin-container {
        position: relative;
        -webkit-transition: opacity 0.3s;
        transition: opacity 0.3s;
    }
    
    .discount-wrapper {
        min-height: calc(100vh vh - 200px);
        background-color: #f4f4f4;
    }
    
    .discount-wrapper-center {
        max-width: 1280px;
        margin: 0 auto;
        padding-bottom: 16px;
        background: url(https://static.xyb2b.com/images/247dc03afe249d66eaa66b5d27a7048c.png) no-repeat;
        background-size: 100% auto;
    }
    
    .discount-header {
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-align: center;
        align-items: center;
        height: 150px;
    }
    
    .ant-image {
        position: relative;
        display: inline-block;
    }
    
    .discount-logo {
        width: 253px;
        height: 51px;
        margin-top: 40px;
    }
    
    .ant-image-img {
        display: block;
        width: 100%;
        height: auto;
    }
    
    .discount-count-down {
        margin-top: 14px;
        color: #fff;
        font-size: 18px;
    }
    
    .time {
        display: inline-block;
        width: 30px;
        height: 28px;
        margin: 0 6px;
        line-height: 28px;
        text-align: center;
        background: #E81200;
        border-radius: 3px;
    }
    
    .infinite-scroll-component__outerdiv {}
    
    .infinite-scroll-component {
        height: auto;
        overflow: auto;
        margin: 0px 20px;
    }
    
    .discount-goods {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: 16px;
        gap: 16px;
    }
    
    .discount-goods-item {
        display: flex;
        height: 166px;
        overflow: hidden;
        background-color: #fff;
        border-radius: 6px;
    }
    
    .discount-goods-item-right {
        display: flex;
        -ms-flex: 1 1;
        flex: 1 1;
        -ms-flex-direction: column;
        flex-direction: column;
        -ms-flex-pack: justify;
        justify-content: space-between;
        padding: 12px;
        overflow: hidden;
    }
    
    .goods-title {
        display: block;
        overflow: hidden;
        color: #333;
        white-space: nowrap;
        text-overflow: ellipsis;
        cursor: pointer;
        -webkit-line-clamp: 1;
    }
    
    .goods-jindu {
        display: flex;
        align-items: center;
        margin: 8px 0;
        position: relative;
        width: 100%;
        font-size: 14px;
    }
    
    /deep/.el-progress {
        display: flex;
        width: 100%;
        align-items: center;
    }
    
    /deep/.el-progress__text {
        font-size: 12px !important;
        min-width: 60px;
    }
    
    .goods-tag {
        align-items: center;
        display: flex;
    }
    
    .goods-tag-item {
        height: 18px;
        padding: 0 4px;
        color: #ff931b;
        font-size: 12px;
        line-height: 18px;
        background: rgba(255, 147, 27, 0.1);
        border-radius: 2px;
    }
    
    .goods-price {
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        -ms-flex-pack: justify;
        justify-content: space-between;
        color: #f44;
        font-size: 14px;
    }
    
    .tax-price {
        font-weight: bold;
    }
    
    .price {
        margin-left: 6px;
        font-size: 18px;
    }
    
    .org-price {
        color: #999;
        font-size: 14px;
        text-decoration: line-through;
    }
    
    .goods-btn {
        display: block;
        width: 72px;
        height: 36px;
        color: #fff;
        font-size: 16px;
        line-height: 36px;
        text-align: center;
        background: linear-gradient(131deg, #ff2a18 0%, #ff4534 100%);
        border-radius: 4px;
        cursor: pointer;
    }
    
    .loadingBox {
        height: 100px;
        margin-top: 50px;
        position: relative;
        /deep/ .el-loading-mask {
            background: none;
            .el-icon-loading {
                font-size: 30px;
            }
        }
    }
    
    .img-pic {
        width: 166px;
        height: 166px;
    }
    
    .img-pic:hover {
        transform: scale(1.1)
    }
    
    img {
        cursor: pointer;
    }
    
    .more {
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
</style>